<template>
  <div id="chinatable" style="overflow:auto">
    <v-app id="inspire">
        <v-data-table
        :headers="headers"
        :items="datas"
        disable-sort=true
        class="table"
        items-per-page=30
        loading=true
        hide-default-footer
        >
        </v-data-table>
    </v-app>
    </div>
</template>

<script>
import jsonp from 'jsonp'
export default {
    name: 'TableChina',
    props:{
        cityNum:{
            type:Number
        }
    },
    watch:{
        cityNum:{
            handler:function(nCityNum){
            this.getData(nCityNum)
            console.log(nCityNum);
            },
            immediate:true
        }
    },
    data(){
        return{
            headers:[{
                text: '市区',value: 'name'
            },{
                text: '确诊总人数',value: 'conNum'
            },{
                text: '现存症状',value:'econNum'
            },{
                text: '现存无症状',value: 'asymptomNum'
            },{
                text: '死亡人数',value: 'deathNum'
            },{
                text:'治愈人数',value: 'cureNum'
            }],
            datas:[
            ]
        }
    },
    mounted(){
        this.getData(0)
    },
    methods:{
            getData(cityNum){
                jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
                    if(!err){
                    let list = data.data.list[cityNum].city.map(item=>({name:item.name,conNum:item.conNum,econNum:item.econNum,asymptomNum:item.asymptomNum,deathNum:item.deathNum,cureNum:item.cureNum,zerodays:item.zerodays}))
                    let tmpdata = data.data.list[cityNum];
                    let citydata ={name:tmpdata.name,conNum:tmpdata.value,econNum:tmpdata.econNum,asymptomNum:tmpdata.asymptomNum,deathNum:tmpdata.deathNum,cureNum:tmpdata.cureNum,zerodays:tmpdata.zerodays}
                    this.datas = list
                    this.datas.push(citydata)
                    }
                })
            }
    }
}
</script>

<style scoped>
#chinatable{
  width: 100%;
  height: 100%;
  background: transparent;
}
/deep/ .text-start{
    font-size: 20px !important;
}
</style>